<template>
  <div class="update-name_mod" :class="themeClass">
    <v-loading v-if="loading" />
    <v-nav :title="$t('UpdateName.change username')"></v-nav>
    <div class="update-name_mod_box">
      <div class="moomoo_form">
        <div class="moomoo_form_input">
          <van-field class="input" v-model="nickname" :placeholder="$t('UpdateName.Please enter a nickname')" />
        </div>
        <div class="moomoo_form_submit">
          <van-button color="#DAAB51" @click="confirmSubmit">{{ $t('UpdateName.Confirm the changes') }}</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'updateName',
  data() {
    return {
      nickname: '',
      isDayTime: false,
      loading: false
    }
  },

  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  created() {
    this.nickname = JSON.parse(localStorage.getItem('userInfo')).nickname
  },
  methods: {
    async confirmSubmit() {
      if (this.nickname.trim() === '') {
        this.$toast(this.$t('UpdateName.Please enter a nickname'))
        return
      }
      this.loading = true
      await this.$https.post('/user/updateUserInfo', { nickname: this.nickname }).then(res => {
        if (res != undefined && res.code == 1) {
          this.$router.go(-2)
        }
      })
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
@import url('~assets/less/index.less');
@import url('~assets/less/vant-form.less');
.update-name_mod {
  min-height: 100vh;
  background-color: #f3f3f3;
}
</style>
